<template>
    <div class="singer-detail">
        <div class="singer-cover" ref="cover" :style="bgStyle">
            <div class="mask"></div>
        </div>
        <div class="name">{{name}}</div>
        <div class="back iconfont icon-fanhui" @click="back"></div>
        <div class="layer" ref="layer"></div>
        <div class="scroll-wrapper" ref="scrollWrapper">
            <scroll :probeType="probeType" :data="songs" @scroll="handleScroll" :listenScroll="listenScroll" ref="scroll">
                <ul class="song-list" v-if="songs.length">
                    <li class="item-song" v-for="(item,index) in songs" :key="item.id" @click="_getSourceUrl(index)"> 
                        <div class="index" :class="{'top-three': index <= 2}">{{index + 1}}</div>
                        <div class="song">
                            <p class="song-name van-ellipsis">{{item.name}}</p>
                            <p class="singer-name van-ellipsis">{{item.ar[0].name}}</p>
                        </div>
                    </li>
                </ul>
            </scroll>    
            <loading v-if="!songs.length"></loading>  
        </div>
    </div>
</template>

<script>
import { getSingerTopSong } from 'api/api'
import { mapMutations, mapActions, mapGetters} from 'vuex'
import Scroll from 'components/scroll/scroll'
import Loading from 'components/loading/loading'
import { playerMixin } from 'common/js/mixin'
export default {
    name: '',
    mixins: [playerMixin],
    data() {
        return {
            probeType: 3,
            listenScroll: true,
            bgStyle: {
                background:''
            },
            params:{},
            songs: [],
            name: ''
        }
    },
    mounted() {
        this.params = this.$route.query
        this.coverHeight = this.$refs.cover.clientHeight
        this.setSingerCover()
        this.setPosition()
        this._getSingerTopSong()
    },
    methods: {
        _getSingerTopSong() {
            let id = this.params.id
            getSingerTopSong({id}).then(res=> {
                this.songs = res.songs
            })
        },
        setSingerCover() {
            this.name = this.$route.query.name
            this.bgStyle.background = `url(${this.params.cover})`
            this.bgStyle.backgroundSize = `cover`
        },
        _getSourceUrl(index) {
            let id = this.songs[index].id
            let list = this.songs
            this.setPlaylist({id,list,index})
            this.getSongSource()
        },
        setPosition() {
            this.$refs.scrollWrapper.style.top = `${this.coverHeight}px`
        },
        back() {
            this.$router.back()
        },
        handleScroll(pos) {
            let scale = 1
            let percent = Math.abs(pos.y / this.coverHeight)
            if(pos.y > 0){            
                scale += percent
            }
            const maxScroll = Math.max(pos.y,(-this.coverHeight + 50))
            this.$refs.layer.style['transform'] = `translate3d(0,${maxScroll}px,0)`
            this.$refs.layer.style['webkitTransform'] = `translate3d(0,${maxScroll}px,0)`
            this.$refs.layer.style['mozTransform'] = `translate3d(0,${maxScroll}px,0)`
            if(pos.y < (-this.coverHeight + 50)){            
                this.$refs.cover.style.height = `50px`
                this.$refs.cover.style.zIndex = 10
                this.$refs.cover.style.paddingBottom = 0
            }else{             
                this.$refs.cover.style.height = 0
                this.$refs.cover.style.zIndex = 0
                this.$refs.cover.style.paddingBottom = `70%`
            }
            this.$refs.cover.style['transform'] = `scale(${scale})`
            this.$refs.cover.style['webkitTransform'] = `scale(${scale})`
            this.$refs.cover.style['mozTransform'] = `scale(${scale})`
        },
        handlePlaylist(list) {
            if(list.length) {
                this.$refs.scrollWrapper.style.bottom = `60px`
            }else{
                this.$refs.scrollWrapper.style.bottom = `0px`
            }
            this.$refs.scroll.refresh()
        },
        ...mapActions({
            setPlaylist: 'getCurrentSong',
            getSongSource: 'getSongSource'
        })
    },
    components: {
        Scroll,
        Loading
    }
}
</script>

<style lang="less" scoped>
    .singer-detail{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
        &.playing{
            bottom:60px;
        }
        .singer-cover{
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 70%;
            .mask{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, .2);
            }
        }
        .back{
            z-index: 20;
            position: absolute;
            top: 17px;
            left: 20px;
            color: #fff;
            font-size: 16px;
            color: #fff;
        }
        .name{
            z-index: 20;
            position: absolute;
            top: 15px;
            left: 50%;
            transform:translate3d(-50%,0,0);
            color: #fff;
            font-size: 16px;
        }
        .layer{
            position: relative;
            height: 100%;
            background: #fff;
        }
        .scroll-wrapper{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            .song-list{
                padding: 20px 20px 0 20px;
                .item-song{
                    display: flex;
                    align-items: center;
                    padding:0 0 20px 0;
                    .index{
                        flex: 0 0 30px;
                        width: 30px;
                        text-align: center;
                        margin-right: 10px;
                        font-size: 18px;
                        font-weight: 550;
                        &.top-three{
                            color: #d43c33;
                        }
                    }
                    .song{
                        overflow: hidden;
                        .song-name{
                            font-size: 16px;
                        }
                        .singer-name{
                            margin-top: 4px;
                            font-size: 12px;
                            color: #888;
                        }
                    }

                }
            }
        }
    }
</style>